<template>
  <div class="about">
    <main class="animated bounceInRight">
      <div class="cent">我的账号</div>
      <img
        src="../../public/image/testimonial-bg.jpg"
        alt="玫瑰"
        width="1519px"
        class="lbt"
      />
    </main>
    <div class="container animated bounceInLeft">
      <div class="box">
        <div class="left">
          <ul>
            <li
              v-for="(item, index) in content"
              :key="index"
              :class="{ active: isactive == index }"
              @click="handle(index)"
            >
              <a>
                <i :class="`iconfont ${item.icon}`"></i>
                {{ item.name }}</a
              >
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="account-1" v-show="isshow == 0">
            <h1>仪表板</h1>
            <p class="fl-14p">您好，Alex Tuntuni（如果不是Tuntuni！ 登出 ）</p>
            <p class="fl-16p">
              从您的帐户仪表板。您可以轻松地查看并查看您最近的订单，管理您的送货和帐单地址以及修改密码和帐户详细信息。
            </p>
          </div>
          <div class="account-2" v-show="isshow == 1">
            <h1>订单</h1>
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>NO</td>
                <td>名称</td>
                <td>日期</td>
                <td>状态</td>
                <td>总价</td>
                <td>Action</td>
              </tr>
              <tr v-for="(item, index) of orders" :key="index">
                <td class="no">{{ item.no }}</td>
                <td class="name">{{ item.name }}</td>
                <td class="date">{{ item.data }}</td>
                <td class="status">{{ item.status }}</td>
                <td class="total">{{ item.total }}</td>
                <td class="action">{{ item.action }}</td>
              </tr>
            </table>
          </div>
          <div class="account-3" v-show="isshow == 2">
            <h1>下载</h1>
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>产品</td>
                <td>日期</td>
                <td>到期</td>
                <td>下载</td>
              </tr>
              <tr v-for="(item, index) of download" :key="index">
                <td class="product">{{ item.product }}</td>
                <td class="date2">{{ item.data }}</td>
                <td class="expire">{{ item.expire }}</td>
                <td class="download">{{ item.download }}</td>
              </tr>
            </table>
          </div>
          <div class="account-4" v-show="isshow == 3">
            <h1>付款方法</h1>
            <p>您还无法保存付款方式</p>
          </div>
          <div class="account-5" v-show="isshow == 4">
            <div class="account-left">
              <h1>Billing address</h1>
              <p class="fl-addres">Alex Tuntuni</p>
              <p class="fl-ma">
                1355 Market St,Suite 900<br />
                San Francisco, CA 94103
              </p>
              <p class="fl-phone">Mobile: (123) 456-7890</p>
              <button class="fl-btn">
                <i class="iconfont icon-bianjibi"></i>EDIT ADDRESS
              </button>
            </div>
            <div class="account-left">
              <h1>Billing address</h1>
              <p class="fl-addres">Alex Tuntuni</p>
              <p class="fl-ma">
                1355 Market St, Suite 900<br />
                San Francisco, CA 94103
              </p>
              <p class="fl-phone">Mobile: (123) 456-7890</p>
              <button class="fl-btn">
                <i class="iconfont icon-bianjibi"></i>EDIT ADDRESS
              </button>
            </div>
          </div>
          <div class="account-6" v-show="isshow == 5">
            <div class="top">
              <h1 class="fl-a6">Account Details</h1>
              <input type="text" placeholder="姓" />
              <input type="text" placeholder="名" />
              <input type="text" placeholder="片假名" />
              <input type="text" placeholder="Email地址" />
            </div>
            <div class="footer">
              <h1>Password change</h1>
              <input type="text" placeholder="保存的密码" />
              <input type="text" placeholder="新密码" />
              <input type="text" placeholder="在输入密码" />
              <button>save change</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
button,
input {
  border: none;
  outline: none;
  background: none;
}
main {
  position: relative;
  .cent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #222222;
    font-size: 42px;
    font-family: "Lora", serif;
  }
}
.container {
  height: 523px;
  padding: 90px 0 0 100px;
  .box {
    width: 1200px;
    padding: 0 12px;
    margin: 0 auto;
    display: flex;
    .left {
      width: 330px;
      height: 331px;
      padding: 0 12px;
      font-size: 16px;
      ul {
        background-color: #f7f7f7;
        li {
          width: 100%;
          height: 43px;
          display: flex;
          .white {
            color: #fff;
          }
          i {
            margin-right: 5px;
          }
          a {
            width: 100%;
            padding: 10px 30px;
            font-size: 14px;
            margin-top: -1px;
            &:hover {
              background-color: #f34f3f;
              color: #ffffff;
            }
          }
        }
        .active {
          background-color: #f34f3f;
          color: #ffffff !important;
        }
      }
    }
    .right {
      width: 800px;
      height: 331px;
      padding: 0 12px;
      h1 {
        font-size: 24px;
        font-weight: 500;
        color: #000000;
        font-family: "Rubik", sans-serif;
        margin-bottom: 8px;
      }
      .account-5 {
        display: flex;
        .account-left {
          width: 50%;
          padding: 0 12px;
          h1 {
            font-weight: 700;
          }
          .fl-addres {
            margin-top: 20px;
            font-weight: 600;
            color: #000000;
          }
          .fl-ma {
            font-size: 14px;
            margin-top: 20px;
          }
          .fl-phone {
            font-size: 14px;
            margin-top: 20px;
          }
          button {
            padding: 10px 15px;
            font-size: 14px;
            background-color: #f34f3f;
            color: white;
            margin-top: 40px;
          }
        }
      }
      .fl-14p {
        font-size: 14px;
        color: #666666;
        margin-top: 10px;
      }
      .fl-16p {
        font-size: 16px;
        margin-top: 25px;
        color: #666666;
      }
      table {
        text-align: center;
        td {
          height: 46px;
          font-size: 14px;
          color: #000000;
          font-weight: 400;
          vertical-align: middle;
          border: 1px solid #ECECEC;
        }
        .no {
          width: 71px;
        }
        .name {
          width: 204px;
        }
        .date {
          width: 190px;
        }
        .status {
          width: 108px;
        }
        .total {
          width: 91px;
        }
        .action {
          width: 108px;
        }
        .product {
          width: 233px;
        }
        .date2 {
          width: 218px;
        }
        .expire {
          width: 120px;
        }
        .download {
          width: 204px;
        }
      }
      .top {
        .fl-a6 {
          font-size: 24px;
          margin: 0 0 8px;
          color: #000000;
        }
        input {
          width: 50%;
          padding: 8xp;
        }
      }
    }
  }
}
</style>


<script>
var table1 = {
  template: `<h3>table1组件</h3>`,
};
var table2 = {
  template: `<h3>table2组件</h3>`,
};
export default {
  data() {
    return {
      isactive: 0,
      iswhite: 0,
      isshow: 0,
      content: [
        { name: "仪表盘", icon: "tachometer icon-33yibiaopanfa-tachometer-01" },
        { name: "订购", icon: "icon-chat-gray" },
        { name: "下载", icon: "icon-xiazai" },
        { name: "付款方式", icon: "icon-xinlingshouyewuicon-" },
        { name: "地址", icon: "icon-address" },
        { name: "账户详细资料", icon: "icon-10" },
        { name: "登录退出", icon: "icon-dengchux" },
      ],
      orders: [
        {
          no: 1,
          name: "Mostarizing Oil",
          data: "Aug22,2020",
          status: "待定",
          total: "￥100",
          action: "view",
        },
        {
          no: 2,
          name: "Mostarizing Oil",
          data: "Aug22,2020",
          status: "待定",
          total: "￥100",
          action: "view",
        },
        {
          no: 3,
          name: "Mostarizing Oil",
          data: "Aug22,2020",
          status: "待定",
          total: "￥100",
          action: "view",
        },
      ],
      download: [
        {
          product: "莫斯塔尔油",
          data: "2020年8月22日",
          expire: "是",
          download: "下载文件",
        },
        {
          product: "莫斯塔尔油",
          data: "2020年8月22日",
          expire: "是",
          download: "下载文件",
        },
      ],
    };
  },
  methods: {
    handle(number) {
      this.isshow = number;
      this.isactive = number;
    },
  },
  mounted() {},
};
</script>